<template>
  <div>
<!--    
    <div v-for="u in userList" :key="u.id">
      <p>{{u.id}}</p>
      <p>{{u.user}}</p>
      <p>{{u.user_name}}</p>
    </div> -->
    <!-- prop属性的值 需与数据库字段名一致 -->
    <h2>用户信息列表</h2>
    <el-table border :data="userList">
      <el-table-column prop="id" label="编号" width="60"></el-table-column>
      <el-table-column prop="user" label="账户名" width="100"></el-table-column>
      <el-table-column prop="user_name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="img" label="头像"></el-table-column>
      <el-table-column prop="addr" label="地址"></el-table-column>

      <!-- 0:禁用 1:正常 -->
      <el-table-column prop="state" label="状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.state">正常</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <el-button type="primary">详情</el-button>
        <el-button type="danger">禁用</el-button>
      </el-table-column>    
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: null
    }
  },
  mounted(){
    //发送http请求，加载列表
    this.axios.get('/user/showusers').then(res=>{
      this.userList = res.data
      //console.log(res);
      //console.log(this.userList);
    })
  }
}
</script>